<template>
  <div class="coupon-page">
    <cp-nav-bar title="优惠券" />
    <van-tabs sticky
              offset-top="45px"
              v-model:active="active"
              @click-tab="onClickTab">
      <van-tab title="待使用" >
        <coupon-list  v-if="cont == 0" :voucherStatus="0"/>
      </van-tab>
      <van-tab title="已使用" >
        <coupon-list v-if="cont == 1" :voucherStatus="1"/>
      </van-tab>
      <van-tab title="已过期" >
        <coupon-list v-if="cont == 2" :voucherStatus="2"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import CouponList from "./components/CouponList.vue";
import { onMounted,ref } from "vue";
const active = ref(0);
const cont = ref(0)

const onClickTab = ({ title }) => {
  console.log('title:', title);
  if (title == "待使用") {
      cont.value = 0
      console.log('赋值：', cont.value);
  } else if (title == "已使用") {
      cont.value = 1
      console.log('赋值：', cont.value);
  } else {
      cont.value = 2
      console.log('赋值：', cont.value);
  }
}

</script>

<style lang="scss" scoped>
.coupon-page{
  width: 375px;
  min-height:100vh;
  background-color: var(--cp-bg);
}
</style>
